<template>
  <div class="strut-div">
    <div class="map-box">
      <!-- <img src="@/assets/imgs/tg/rs-map-img.png" alt="map"> -->
      <iframe
        width="1974px"
        height="977px"
        style="border:0px"
        src="/static/iframe/demo.html?url=http://58.242.68.18:35501/iservertwo/services/map-taigu23/rest/maps/@taigu_cut_1&x=12551106.61&y=4495357.21&zoomsize=11.5"
      ></iframe>
      <div class="select_right_top" title="全屏">
        <a @click="fullScreen('010101')"
          ><img
            src="@/assets/imgs/10.png"
            title="全屏"
            class="img"
            style="height: 26px;margin-top: 5px;"
        /></a>
      </div>
    </div>
    <div class="weather-box">
      <div class="weather-title">天气预报</div>
      <div class="weather-main">
        <div class="weather-date">
          <img :src="weather.weather_data[0].dayPictureUrl" />
          <p class="date">今天</p>
          <p class="date-txt">{{ weather.weather_data[0].weather }}</p>
        </div>
        <div class="weather-info">
          <div class="info-box">
            <!-- <img :src="" /> -->
            <p>当前温度</p>
            <p class="info-txt">
              {{ weather.weather_data[0].date.substring(14, 17) }}
            </p>
          </div>
          <div class="info-box">
            <p>紫外线强度</p>
            <p class="info-txt">{{ weather.zwx }}</p>
          </div>
          <div class="info-box">
            <p>风速</p>
            <p class="info-txt">
              {{ weather.weather_data[0].wind.substring(2, 4) }}
            </p>
          </div>
          <div class="info-box">
            <p>PM2.5</p>
            <p class="info-txt">{{ weather.pm25 ? weather.pm25 : "暂无" }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="all-area-box">
      <div class="all-area-title">
        <img src="@/assets/imgs/tg/agro-icon.png" alt="agro" />
        <!-- 2019年各区县最新农作物总面积对比分析 -->
        各乡镇侵占耕地面积对比
      </div>
      <div class="all-area-main">
        <bar-chart ref="allAreaBar" :config="allAreaBarConfig"></bar-chart>
        <!-- <common-bar-chart
          ref="allAreaBar"
          :config="allAreaBarConfig"
        ></common-bar-chart> -->
      </div>
    </div>
    <div class="planting-area-box">
      <div class="planting-area-title">
        <img src="@/assets/imgs/tg/menu-icon.png" alt="agro" />
        种植面积对比
      </div>
      <div class="planting-area-main">
        <common-pieNew-chart ref="rsPlantingArea" :config='rsPlantingAreaConfig'></common-pieNew-chart>
      </div>
    </div>
  </div>
</template>
<script>
import jsonp from "jsonp";
// import CommonBarChart from "@/components/common/common-bar-chart.vue";
import barChart from "./barChart.vue";
import CommonPieNewChart from '@/components/common/common-pieNew-chart.vue';
import { fetch } from "@/network/network";
import { mapGetters } from "vuex";

export default {
  name: "ng-rs-middle",
  components: {
    barChart,
    CommonPieNewChart
  },
  data() {
    return {
      weather: {
        weather_data: [
          {
            dayPictureUrl: "",
            date: "",
            wind: "",
          },
        ],
      },
      allAreaBarConfig: {
        id: "", // allAreaBar
        xAxis: ["城区", "郊区", "县城"],
        legend: [""],
        series: [],
      },
      rsPlantingAreaConfig: {
        option: {
            title: '',
            id: 'rsPlantingArea',
            color: ['#19AEF1', '#AC4BFC', '#EDA652', '#08C49A', '#7264F7', '#00EAFF'],
            tooltip: {
              show: true, //防止鼠标移到不需要的数据上弹出label
              trigger: 'item',
              formatter: "{a} {b} : {c} ({d}%)"
            },
            legend: {
              show: true,
              x: "0%",
              y: "bottom",
              orient: 'vertical',
              textStyle: {
                color: ['#19AEF1', '#AC4BFC', '#EDA652', '#08C49A', '#7264F7', '#00EAFF'],
                fontSize: 14,
              },
              padding: 20,
              itemGap: 14,
              data: ['玉米','谷子','苗木花卉','蔬菜','水果']
            },
            series: [{
              name: '',
              type: 'pie',
              radius: 100,
              center: ['50%', '50%'],
              label: {
                // color: "#fff",
                formatter: '{a} {b}:{d}%',
                fontSize: 16
              },
              labelLine: {
                length: 10,
                length2: 20,
              },
              data: [{
                name: '谷子',
                value: 12.73
              },{
                name: '苗木花卉',
                value: 4.02
              },{
                name: '蔬菜',
                value: 9.38
              },{
                name: '水果',
                value: 4.02
              },{
                name: '玉米',
                value: 36.85
              }]
            }]
          }
      }
    };
  },
  computed: {
    ...mapGetters({
      getRemoteData: "remote_data",
    }),
  },
  mounted() {
    this.getWeather();
    setTimeout(() => {
      this.formatData();
    }, 2000);

    this.$refs.rsPlantingArea.initChart();
  },
  methods: {
    getWeather() {
      const url =
        "http://api.map.baidu.com/telematics/v3/weather?location=%E5%A4%AA%E8%B0%B7%E5%B8%82&output=json&ak=WuO5qDQOjiGoyPeMHIs2GzEq78AsDdQ5";
      jsonp(url, null, (err, res) => {
        this.weather = res.results[0];
        this.weather.zwx = res.results[0].index.filter(
          (item) => item.title === "紫外线强度"
        )[0].zs;
      });
    },
    formatData() {
      const obj = this.getRemoteData.filter(
        (item) => item.boxNum === "0104"
      )[0];
      const xAxis = obj.data[0].data.map((item) => item.name);
      const legend = obj.data.map((item) => item.name);
      const country = {};
      obj.data.forEach((item) => {
        const series = {
          name: item.name,
          type: "bar",
          data: item.data.map((each) => each.value),
        };
        this.allAreaBarConfig.series.push(series);
      });
      this.allAreaBarConfig.id = "allAreaBar";
      this.allAreaBarConfig.xAxis = xAxis;
      this.allAreaBarConfig.legend = legend;
      this.allAreaBarConfig.yAxisName = obj.yunit;
      this.$refs.allAreaBar.initChart();
    },
    fullScreen(mark) {
      this.$router.push({path: '/full-screen', query: {mark}});
    }
  },
};
</script>
<style lang="scss" scoped>
.strut-div {
  position: relative;
  overflow: hidden;

  .map-box {
    width: 1974px;
    height: 977px;
    margin: 143px auto 0;
  }
}

.weather-box {
  position: absolute;
  top: 180px;
  left: 590px;
  width: 449px;
  height: 209px;
  background: url("../../../assets/imgs/tg/rs-wearther-bg.png") no-repeat;
  background-size: 100%;

  .weather-title {
    height: 60px;
    line-height: 60px;
    font-size: 22px;
    color: #f7cc46;
    text-align: right;
    padding-right: 80px;
  }

  .weather-main {
    display: flex;
    height: calc(100% - 60px);

    .weather-date {
      flex: 1;
      text-align: center;
      color: #fff;

      .date {
        font-size: 22px;
        margin-top: 20px;
      }

      .date-txt {
        font-size: 18px;
        margin-top: 20px;
      }
    }

    .weather-info {
      flex: 2;
      display: flex;
      flex-wrap: wrap;
      color: #fff;

      .info-box {
        text-align: center;
        width: 50%;
        height: 50%;
      }

      .info-txt {
        font-size: 22px;
        color: #f7cc46;
        margin-top: 10px;
      }
    }
  }
}

.all-area-box {
  position: absolute;
  bottom: 40px;
  right: 550px;
  width: 733px;
  height: 314px;
  background: url("../../../assets/imgs/tg/rs-area-bg.png") no-repeat;
  background-size: contain;

  .all-area-title {
    height: 70px;
    line-height: 70px;
    font-size: 22px;
    color: #aaddff;
    padding-left: 20px;

    > img {
      vertical-align: middle;
    }
  }

  .all-area-main {
    height: calc(100% - 70px);
  }
}

.select_right_top {
  position: absolute;
  top: 170px;
  right: 580px;
  width: 36px;
  height: 36px;
  overflow: hidden;
  z-index: 99999;
  cursor: pointer;
  /* padding: 0 30px 0 10px; */
  background: #032064;
  border: 1px solid #1ae5e9;
  border-radius: 6px;
  color: #1ae5e9;
  line-height: 38px;
  text-align: center;
  /* background: red; */
}

.planting-area-box {
    position: absolute;
    left: 585px;
    bottom: 35px;
    width: 470px;
    background: url("../../../assets/imgs/tg/chart-window-v2.png") no-repeat;
    background-size: 100% 100%;
    height: 314px;
    z-index: 99999;
    .planting-area-title {
      height: 70px;
      line-height: 70px;
      font-size: 22px;
      color: #aaddff;
      padding-left: 20px;

      >img {
        vertical-align: middle;
      }
    }

    .planting-area-main {
      height: calc(100% - 70px);
    }
}
</style>
